<template>
	<view>
		<view class="head-fixed">
			<view class="status-bar"></view>
			<view class="deatail-head">
				<view class="detail-head-left">
					<uni-icons type="arrowleft" size="22" @click="returnPage" />
				</view>
				<view class="head-title" style="display: flex;align-items: center;">
					<view @click="gjcPop" style="width: 50%;text-align: center;">
						<text class="head-title-text">{{keywords}}</text>
						<text class="uni-panel-icon uni-icon"
							:class="iconopen ? 'uni-panel-icon-on' : ''">&#xe581;</text>
					</view>
					<view @click="timePop">
						<text>{{timeText}}</text>
						<!-- <u-icon name="arrow-down-fill" color="#c0c4cc" size="24"></u-icon> -->
						<text class="uni-panel-icon uni-icon"
							:class="iconopen2 ? 'uni-panel-icon-on' : ''">&#xe581;</text>
					</view>
				</view>
				<view class="detail-head-right">
					<view class="right-icon" @click="togglePopup('top', 'operation')">操作</view>
				</view>
			</view>
		</view>
		<!-- <view class="calendar-box" style="margin-top: 100rpx;"> -->
		<!-- :safe-area-inset-bottom="true" -->
		<!-- <u-calendar :show="show" :mode="mode" :minDate="beforeDate" :maxDate="nowDate"  :monthNum="25" :defaultDate="timeInput==''?nowDate:timeInput" :closeOnClickOverlay="true"   @close="dateClose" @confirm="change"  ></u-calendar> -->
		<!-- <uni-datetime-picker type="date" v-model="timeInput" :start="beforeDate" :end="nowDate" @change="change"  v-if="show"/> -->
		<!-- </view> -->

		<view class="container" :style="{top: topHei + 'px'}">
			<!-- :style="isnull ? '':'display:none'" -->
			<view class="dingyue-kong" v-if="isnull">
				<view class="dingyue-kong-xq">
					<view class="null-pic">
						<image src="/static/img/custom/null.png"></image>
					</view>
					<view class="null-text">您当前的订阅条件没有找到相关项目，</view>
					<view class="null-text">建议您更换订阅条件</view>
					<view class="add-gjc" @click="modify" :style="frommail==1 ? 'display:none':''">
						<button>立即修改</button>
					</view>
				</view>
			</view>

			<!-- 没有订阅记录 -->
			<view class="uni-list" :style="isnull ? 'display:none':''">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData"
					:key="key" :style="isInArray(clickedid,value.id)?'background-color:#f2f2f2':''">
					<view class="list-daochu">
						<label :style="isdaochu?'':'display:none'">
							<checkbox value="cb" :class="{'uni-checkbox-input-checked':isInArray(checkArr,value.id)}"
								:checked="isInArray(checkArr,value.id)" color="#4f97fe" style="transform:scale(0.5)"
								@tap="checkbox(value)" />
						</label>
					</view>
					<view class="list-body" :class="bodyWidth?'list-body-sm':''">
						<view class="list-cell-title" @click="navToDetails(value)">
							<!-- <text @click="navToDetails(value)">{{value.title}}</text>-->
							<!-- <rich-text :nodes="heighthtml(value.title)" @click="navToDetails(value)"
								:style="isInArray(clickedid,value.id)?'color:gray':''+'display: flex;'"></rich-text> -->
							<view :class="{ hasVisited: showGray(value) }" v-html="heighthtml(value.title)"></view>

						</view>
						<!-- <view class="list-cell-content" @click="navToDetails(value)">{{ value.contentText }}</view> -->
						<view
							style="font-size: 28rpx; color: #a7a7a7; margin: 15rpx 0; text-overflow: ellipsis; overflow: hidden;white-space: nowrap;">
							<!-- <jyf-parser :html="heighthtml(value.contentText)" lazy-load ref="article"></jyf-parser> -->
							<!-- <mp-html :content="heighthtml(value.contentText,false)" :selectable="true">加载中...</mp-html> -->
							<!-- <rich-text :nodes="heighthtml(value.contentText)" class="list-cell-content" @click="navToDetails(value)" style="display: flex;"></rich-text> -->
							<!-- #ifdef APP-PLUS -->
							<!-- <jyf-parser html="heighthtml(detailData.content,false)" style='user-select:text'
														:tagStyle="tagStyle" @imgtap="imgtap" @linkpress="linkpress">加载中...</jyf-parser> -->
							<!-- 新版，是jyf-parser的新版，文档下载时可以显示顶部工具条，老版的显示不 -->
							<mp-html :content="heighthtml(value.contentText,false)" :selectable="true">加载中...</mp-html>
							<!-- #endif -->
							<!-- #ifdef APP-HARMONY -->
							<!-- <up-parse :content="heighthtml(value.contentText,false)"
								:selectable="true">加载中...</up-parse> -->
							<rich-text :nodes="heighthtml(value.contentText,false)" :selectable="true"></rich-text>
							<!-- #endif -->
						</view>
						<view class="list-cell-bottom">
							<text class="list-area">{{ value.diqu }} {{ value.diqucity }}</text>
							<text class="list-category">{{ value.typeStr }}</text>
							<text class="list-time">{{value.time}}</text>
						</view>
					</view>
				</view>
				<uni-load-more :status="this.loadMoreStatus" :icon-size="16"> </uni-load-more>
			</view>

		</view>


		<!-- 关键词选择 -->
		<view class="gjc_popupbox" :style="showgjc ? 'display:block; top:'+ topHei + 'px':'display:none'"
			@click="ClosePopup()">
			<view class="keywords-popup">
				<view class="keyword-list-item" v-for="(keywords, index) in keylist" :key="index"
					@click="keywordclick(keywords)">{{keywords}}</view>
			</view>
		</view>
		<!-- 时间选择 -->
		<view class="gjc_popupbox" :style="showtime ? 'display:block; top:'+ topHei + 'px':'display:none'"
			@click="ClosePopup2()">
			<view class="keywords-popup" @click.stop>
				<view :class="isActive?'buxianshijian active':'buxianshijian'" @click="allTimeClick">不限时间</view>
				<view style="padding: 0 30rpx 30rpx;">
					<view style="color: #999999;font-size: 28rpx;margin-top: 20rpx;">自定义时间</view>
					<uni-datetime-picker type="date" v-model="timeInput" :start="beforeDate" :end="nowDate"
						@change="change">
						<view
							style="display: flex; align-items: center; border: 1px solid #c0c4cc;  border-radius: 5px; padding: 0 15px;margin-top: 20rpx;">
							<!-- <u-input :value="timeInput" placeholder="请选择时间" :disabled="true"  /> -->
							<view v-if="timeInput" style="padding:12rpx 0;flex:1;">{{timeInput}}</view>
							<view v-else style="padding:12rpx 0;flex:1;color:rgb(192, 196, 204);">请选择时间</view>
							<u-icon name="arrow-down-fill" color="#c0c4cc" size="24"></u-icon>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
		</view>
		<!-- 操作 -->
		<uni-popup ref="showoperation" :type="type">
			<view class="operation-popup">
				<view class="operation-box">
					<text class="sanjiao"></text>
					<view class="operation-body">
						<view class="operation-item" @click="modify">
							<image class="operation-icon" src="/static/img/custom/bianji-icon.png"></image> 定制
						</view>
						<view class="operation-item" @click="choose">
							<image class="operation-icon" src="/static/img/custom/daochu-icon.png"></image> 导出
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 导出 -->
		<uni-popup ref="showimage" :type="type" :mask-click="true">
			<view class="youxiang-pop">
				<view class="youxiang-pop_content">
					<image src="/static/img/Details/youxiang.png" class="youxiang_img"></image>
					<view class="youxiang_text1">还差一步</view>
					<view class="youxiang_text2">输入邮箱即可继续发送</view>
					<view class="youxiang_input">
						<input type="text" v-model="Email" placeholder="请填写您的邮箱" placeholder-style="color:#bebec1;" />
					</view>
					<view class="export-checkbox">
						<label>
							<checkbox value="" checked="true" color="#3b8bfe" style="transform:scale(0.7)" /> 导出是否包含内容
						</label>
					</view>
					<view class="youxiang-btn" @click="fasong">确认并导出</view>
					<view class="youxiang-tips">
						<view style="color: #f8080e;">温馨提示：</view>
						<view>输入邮箱后，如果长时间没有收到邮件请检查您的垃圾箱或重新发送</view>
					</view>
				</view>
				<view class="huiyuan_close" @click="cancel('image')">
					<image src="/static/img/Details/huiyuan_close.png"></image>
				</view>
			</view>
		</uni-popup>
		<!-- 发送成功 -->
		<view class="export-success" style="display: none;">
			<image src="/static/img/custom/success.png" class="export-successimg"></image>
			<view class="export-text1">发送成功</view>
			<view class="export-text2">已结发送到您的邮箱，请查收！</view>
			<view class="youxiang-tips">
				<view style="color: #f8080e; margin-bottom: 10rpx;">温馨提示：</view>
				<view>输入邮箱后，如果长时间没有收到邮件请检查您的垃圾箱或重新发送</view>
			</view>
		</view>
		<view class="editor-bottom" :style="isdaochu?'':'display:none'">
			<view class="editor-bottom-btn1" @click="quxiao()">取消</view>
			<view class="editor-bottom-btn2" @click="daochu()">确定<text
					style="font-size: 26rpx;">（已选中{{checkNum}}条）</text></view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "uniicons",
		'src': "url('/static/uni.ttf')"
	});
	// #endif
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	//import jyfparser from '@/components/jyf-parser/jyf-parser.vue'
	import {
		clickedObj
	} from '@/util/index.js'
	var dingyueid = 0;
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {

		components: {
			uniNavBar,
			uniLoadMore,
			uniPopup,
			//jyfparser
		},
		data() {
			return {
				type: '',
				keywords: '全部',
				allkeyword: '',
				pagesize: 20,
				pageindex: 1,
				reload: false,
				iconopen: false,
				iconopen2: false,
				status: 'more',
				loadMoreStatus: "loading", //加载更多 more|loading|noMore
				listData: [],
				keylist: ['全部'],
				nexttoken: '', //nexttoken
				checkArr: [],
				checkNum: 0,
				isdaochu: false,
				count: 0,
				Email: '',
				keyword: '',
				color: "#FD463E",
				weight: false,
				showgjc: false,
				keyArr: [],
				bodyWidth: false,
				topHei: 0,
				isnull: false,
				frommail: 0,
				clickedid: [],

				show: false,
				mode: 'range',
				timeInput: '',
				showtime: false,
				isActive: false,
				timeText: '时间',
				beforeDate: `${year-2}-${month}-${date}`,
				nowDate: `${year}-${month}-${date}`,
				clickedObj,
				clickid: '',
			}
		},
		onLoad: function(options) {
			dingyueid = options.id;
			console.log(dingyueid)
			var keyword = options.keyword;
			if (keyword != '' && keyword != undefined) {
				this.allkeyword = keyword;
				var list = keyword.split(',');
				list.forEach(item => {
					this.keylist.push(item);
				});
			}
			if (options.mail && options.mail != '' && options.mail != undefined) {
				this.frommail = options.mail;
			}

			this.checkLogin(1);
			if (dingyueid <= 0 || dingyueid == undefined) {
				uni.showToast({
					title: "获取订阅id失败",
					icon: "none",
					success: function() {
						uni.switchTab({
							url: '/pages/user/custom/custom',
						});
					}
				});
				return;
			} else {
				this.getList("refresh");
			}
		},
		onPullDownRefresh() {
			this.getList("refresh");
		},
		onReachBottom() {
			this.getList("add");
		},
		onUnload() {
			uni.hideNavigationBarLoading(); //关闭加载动画
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.head-fixed').boundingClientRect(data => {
				this.topHei = data.height
			}).exec();
		},
		computed: {
			showGray() {
				return item => {
					let data = false;
					const id = item.njid ? item.njid : item.id

					if (item.njid) {
						data = this.clickedObj.pro.get() && this.clickedObj.pro.get().includes(item.njid);
					} else {
						data = this.clickedObj.bx.get() && this.clickedObj.bx.get().includes(item.id);
					}
					return data || this.clickid === item.id;
				}
			},
		},
		methods: {
			timePop() {
				this.showtime = true;
				this.iconopen2 = true
				this.showgjc = false
				this.iconopen = false
			},
			timeClick() {
				this.isActive = false
				this.show = true;
			},
			change(e) {
				// console.log(e)
				const val = e;
				this.timeInput = val
				this.show = false
				setTimeout(() => {
					this.showtime = false;
					this.iconopen2 = false
				}, 200)
				this.timeText = val
				this.getList('refresh');
			},
			dateClose() {
				this.show = false
			},
			allTimeClick() {
				this.timeInput = '';
				this.timeText = '不限时间';
				this.isActive = true;
				setTimeout(() => {
					this.showtime = false;
					this.iconopen2 = false
				}, 200)
				this.getList('refresh');
			},
			returnPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			keywordclick(key) {
				this.keywords = key;
				if (key == "全部")
					this.keyword = this.allkeyword
				else
					this.keyword = key;
				this.ClosePopup();
				this.getList('refresh');
			},
			getList(type) {
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.loadMoreStatus === "noMore") {
						return;
					}
					this.loadMoreStatus = "loading";
				}
				if (type === 'refresh') {
					//this.listData = []; //刷新前清空数组
					this.loadMoreStatus = "loading";
					uni.showNavigationBarLoading();
					this.pageindex = 1;
					this.nexttoken = '';
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					});
					// 重置空状态
					this.isnull = false
				}

				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 5127;
				data.id = dingyueid;
				data.pagesize = this.pagesize;
				data.page = this.pageindex;
				data.nexttoken = this.nexttoken;
				data.keyword = this.keyword;
				data.frommail = this.frommail;
				data.timetype = 0
				data.starttime = this.timeText
				data.endtime = this.timeText
				uni.request({
					url: this.baseConfig.serverURL + 'User/custom/Result.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (type === 'refresh') {
							this.listData = []; //刷新前清空数组
						}
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								this.loadMoreStatus = "noMore";
								if (this.listData.length <= 0 && this.pageindex == 1)
									this.isnull = true;
								uni.stopPullDownRefresh();
								uni.hideNavigationBarLoading(); //关闭加载动画
								return;
							} else {
								//获取成功，绑定
								let list = res.data.other2.list;
								if (list == undefined || list == '' || list.length <= 0) {
									console.log("没数据了");
									this.loadMoreStatus = "noMore";
									uni.stopPullDownRefresh();
									uni.hideNavigationBarLoading(); //关闭加载动画
									return;
								}
								var keyword = res.data.other2.keyword;
								if (keyword != '' && keyword != undefined) {
									this.keylist = ['全部'];
									this.allkeyword = keyword;
									var klist = keyword.split(',');
									klist.forEach(item => {
										this.keylist.push(item);
									});
								}
								if (res.data.other2.keyarr.length > 0 && res.data.other2.keyarr != undefined) {
									this.keyArr = res.data.other2.keyarr;
								}

								this.nexttoken = res.data.other2.nexttoken;
								list.forEach(item => {
									this.listData.push(item);
								})
								this.loadMoreStatus = "more";
								if (list.length < this.pagesize) {
									this.loadMoreStatus = "noMore";
								}
								this.pageindex++;
								uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
								uni.hideNavigationBarLoading();
							}

						} else {
							uni.showToast({
								title: '获取失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取失败，可能已超时！',
							icon: "none"
						});
					}
				})

			},
			//详情
			navToDetails(item) {
				this.clickedid.push(item.id);
				let uri = encodeURIComponent(JSON.stringify(item));
				let key = encodeURIComponent(this.keyArr.toString());
				switch (item.type) {
					case 3:
					case 10:
					case 11:
					case 12:
					case 13:
					case 14:
					case 98:
					case 99:
						clickedObj.pro.set(item.id);
						uni.navigateTo({
							url: '/pages/xiangmu/detail?ly=search&data=' + encodeURIComponent(uri) + '&keyword=' +
								encodeURIComponent(key)
						})
						break;
					default:
						clickedObj.bx.set(item.id)
						uni.navigateTo({
							url: '/pages/zhaobiao/detail?ly=search&data=' + encodeURIComponent(uri) + '&keyword=' +
								encodeURIComponent(key)
						})
						break;
				}
			},
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open();

				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			gjcPop() {
				this.showtime = false
				this.iconopen2 = false
				if (this.showgjc) {
					this.iconopen = false;
					this.showgjc = false;
				} else {
					this.iconopen = true;
					this.showgjc = true;
				}
			},
			ClosePopup() {
				this.iconopen = false;
				this.showgjc = false;
			},
			ClosePopup2() {
				this.iconopen2 = false;
				this.showtime = false;
			},
			checkbox(e) {

				if (this.isInArray(this.checkArr, e.id)) {
					this.checkArr = this.checkArr.filter(item => {
						return item != e.id;
					})
				} else {
					this.checkArr.push(e.id);
				}
				console.log(this.checkArr.toString())
				this.checkNum = this.checkArr.length;
			},
			isInArray(arr, value) {
				for (var i = 0; i < arr.length; i++) {
					if (value === arr[i]) {
						return true;
					}
				}
				return false;
			},
			daochu() {
				if (this.checkArr.length > 1) {
					uni.showToast({
						title: '当前只能选择一条信息进行导出！',
						icon: "none"
					});
				} else {
					this.togglePopup('center', 'image');
				}
			},
			choose() {
				if (!this.isdaochu)
					this.isdaochu = true;
				this.bodyWidth = true;
				this.cancel('operation');
				console.log(this.checkArr.toString())
			},
			modify() {
				uni.navigateTo({
					url: '/pages/user/custom/choose/choose?id=' + dingyueid + '&isaddorupdate=2&type=0'
				});
			},
			quxiao() {
				this.isdaochu = false;
				this.bodyWidth = false;
				this.checkArr = [];
				this.checkNum = this.checkArr.length;
			},
			fasong() {
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 5127;
				data.ids = this.checkArr.toString();
				data.tomail = this.Email;
				uni.request({
					url: this.baseConfig.serverURL + 'User/Email/ZhaobiaoSendToEmail.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							} else {
								//获取成功，绑定
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								this.$refs.showimage.close();
								this.quxiao();
							}
						} else {
							uni.showToast({
								title: '邮件发送失败',
								icon: "none"
							});
							this.$refs.showimage.close();
							this.quxiao();
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '邮件发送失败，可能已超时！',
							icon: "none"
						});
						this.$refs.showimage.close();
						this.quxiao();
					}
				})

			},
			heighthtml(cont) {
				if (this.keyArr.toString() === '') {
					return cont;
				}
				var keyarr = this.keyArr;
				for (var i = 0; i < keyarr.length; i++) {
					var reg = new RegExp((`(${keyarr[i]})`), "gm");
					var color = this.color;
					var weight = this.weight ? 'bold' : 'normal';
					var replace = '<span style="color:' + color + ';font-weight: ' + weight + ';">$1</span>';
					cont = cont.replace(reg, replace)
				}
				return cont;
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/custom/dylist.scss";

	page {
		background-color: #FFFFFF;
	}

	.editor-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 9999;

		.editor-bottom-btn1 {
			width: 40%;
			text-align: center;
			color: #555555;
			background-color: #FFFFFF;
			padding: 30rpx 0;
		}

		.editor-bottom-btn2 {
			text-align: center;
			flex: 1 1 0%;
			padding: 30rpx 0;
		}
	}

	.uni-list-cell .list-body-sm {
		width: 90%;
		margin-left: 15rpx;
	}

	.list-cell-title .hasVisited {
		color: #a1a1a1;
	}

	.deatail-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 30rpx 0rpx;
		padding-top: 40rpx;
		padding-bottom: 30rpx;

		.head-title {
			font-size: 34rpx;
			display: flex;
			flex: 1;
			overflow: hidden;
			align-items: center;
			margin: 0 15px;
			justify-content: center;

			.head-title-text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.detail-head-right {
			display: flex;
			flex-direction: row;
			align-items: center;

			.right-icon {
				font-size: 28rpx;
				color: #366DE1;
			}
		}
	}

	.head-fixed {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 10;


	}

	.calendar-box ::v-deep .u-hover-class {
		opacity: 0.6;
	}

	.buxianshijian {
		background-color: #f8f8fa;
		color: #6b6b6b;
		height: 80rpx;
		border-radius: 3px;
		font-size: 28rpx;
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 150rpx;
		text-align: center;

		&.active {
			background-color: #eaf2ff;
			color: #2f69e0;
		}
	}
</style>